<template>
  <div class="study">
    
    <div class="tags">
      <template v-for="(item,index) in labels" :key="item.id">
        <el-tag class="labelsItem" :type="labelsColor[index]" @click="labelsClick(item.name)">{{item.name}}</el-tag>
      </template>
    </div>

    <div class="search">
      <div class="search-left"> <el-icon><EditPen /></el-icon>学习日志——共{{total}}篇</div>
    </div>

    <template v-for="item in momentList" :key="item.id" >
      <div class="detail" @click="pushMoment(item.id)">
        <div class="detail-title">{{item.title}}</div>
        
        <div class="detail-img">
          <div class="img-box"><img :src=" item.images === null ? 'http://127.0.0.1:8000/src/assets/img/avatar.gif' : item.images[0]" alt=""></div>
          
          <!-- <div class="detail-content" style="overflow:hidden;text-overflow:sllipsis;-webkit-line-clamp:3;"  v-html="item.content"></div> -->
        </div>
        <div class="detail-time">
          
          <div>
            <el-icon style="color: #409eff;"><PriceTag /></el-icon>
          <span v-for="label in item.labels">
            <el-tag class="ml-2" type="success">{{label.name}}</el-tag>
          </span>
          </div>
          <div>
            <el-icon><Timer /></el-icon>
          <span >发布时间——{{formatUTC(item.createTime)}}</span>
          </div>
          
        </div>
      </div>
    </template>
    
    <el-col   class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
    </el-col>
    
  </div>
</template>

<script setup lang="ts">

import 'element-plus/theme-chalk/display.css'
import { storeToRefs } from 'pinia';
import useStudyStore from '@/store/blog/study'
import { formatUTC } from '@/utils/format'
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter() 

const studyStore = useStudyStore()
studyStore.getMomentLabelsAction(30, 0)
const labelsColor = reactive([
  'success', 'info', 'warning', 'danger', '',
  'warning', 'success', 'info', '', 'danger',
  'warning', 'danger', '','warning', 'success',
  'info', '', 'danger','warning', 'danger',
  'info', 'warning', 'danger', '','warning',
  'success','danger', '','warning', 'success',
  'info', '', 'danger','warning', 'danger',
])
// studyStore.getMomentListAction(0, 10)
const { momentList, total, labels } = storeToRefs(studyStore)


const currentPage = ref(1)
const pageSize = ref(10)
fetchUserListData()





function pushMoment(MomentId: any) {
  // console.log(MomentId)
  router.push('/moment/' + MomentId)
}



function handleCurrentChange() {
  fetchUserListData()
  // console.log('currentPage change',currentPage.value)
}

function handleSizeChange() {
  fetchUserListData()
  // console.log('pageSize change',pageSize.value)
}



//定义函数
function fetchUserListData(fromData: any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const pageInfo = {offset, size}

  const queryInfo = { ...pageInfo, ...fromData }
  //发起网络请求
    studyStore.getMomentListAction(queryInfo)

}

//标签
function labelsClick(name: string) {
  // console.log(name)
  ElMessage({type: 'error', message:name + '——标签功能本来是做了的,不知道接口突然出了什么问题,主要是很多功能没时间去修复了'})
  // studyStore.searchMomentByLabelAction(name)
}


</script>

<style scoped lang="less">
.study {
  box-shadow: 0 0 6px rgba(0,0,0,.2);
  margin-bottom: 20px;
  .tags {
    padding: 20px;
    border-bottom: 1px solid #eee;
    .labelsItem:hover {
      cursor: pointer;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    color: #909399;
    position: relative;
    .search-left {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
  }
  .detail {
    cursor: pointer;
    padding: 20px 20px;
    transition: box-shadow 200ms ease;
    box-shadow: 0 0 6px rgba(161, 161, 161, 0.2);
    transition: box-shadow 500ms ease;
    &:hover {
      transition: box-shadow 200ms ease;
      box-shadow: 0 0 6px rgba(0,0,0,.5);
    }
    span {
      font-size: 12px;
      
    }
    .detail-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: rgba(241, 88, 11, 0.658);
      font-weight: bolder;
      margin-bottom: 10px;
      
    }
    .detail-time {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      color:#ee7474;
      padding: 5px 0;
      div {
        display: flex;
        align-items: center;
      }
    }
    .detail-img {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 260px;
      border-radius: 40px;
      border-left: 1px solid #74a9ee;
      border-right: 1px solid #ee7474;
      .img-box {
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: auto;
            height: 260px;
            transition: width 1000ms ease;
            transition: height 1000ms ease;
          
            &:hover {
              
              width: auto;
              height: 280px;
              transition: width 1000ms ease;
              transition: height 1000ms ease;
            }
          } 
      }
      
      // .detail-content {
      //   margin-left: 15px;
      //   flex: 1;
      //   height: 165px !important;
      //   font-size: 14px;
      //   overflow:hidden;
      // }
    }
    
  }
  .pagination {
    display: flex;
    padding: 10px;
    overflow-x:scroll;
    overflow-y:hidden;
    /*
      解决ios上滑动不流畅
   */
  -webkit-overflow-scrolling:touch;

  }
}
.el-input {
  width: 400px;
  
}

.el-tag {
  margin: 5px 5px;
}

.pagination::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.pagination::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #f4a7ca;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.pagination::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}
</style>
